<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书封面获取测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #333;
            text-align: center;
        }
        h2 {
            margin-top: 30px;
            font-size: 1.5em;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="file"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        button.secondary {
            background-color: #2196F3;
        }
        button.secondary:hover {
            background-color: #0b7dda;
        }
        .result {
            margin-top: 20px;
            padding-top: 20px;
        }
        .error {
            color: red;
            margin-top: 10px;
        }
        .loading {
            text-align: center;
            margin: 20px 0;
            display: none;
        }
        .book-cover {
            max-width: 100%;
            display: block;
            margin: 20px auto;
            border: 1px solid #ddd;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            max-height: 500px;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        .status.success {
            background-color: #e8f5e9;
            border: 1px solid #a5d6a7;
            color: #2e7d32;
        }
        .status.error {
            background-color: #ffebee;
            border: 1px solid #ef9a9a;
            color: #c62828;
        }
        .token-input {
            font-family: monospace;
            font-size: 12px;
        }
        .image-path {
            font-family: monospace;
            font-size: 14px;
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
            word-break: break-all;
        }
        .server-url-group {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-bottom: none;
            margin-right: 5px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }
        .tab.active {
            background-color: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
            font-weight: bold;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .buttons-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图书封面测试工具</h1>
        
        <div class="server-url-group">
            <div class="form-group">
                <label for="serverUrlInput">服务器URL</label>
                <input type="text" id="serverUrlInput" value="http://localhost:8080" placeholder="例如: http://localhost:8080">
            </div>
            <div class="form-group">
                <label for="tokenInput">JWT令牌 (Authorization Bearer Token)</label>
                <input type="text" id="tokenInput" class="token-input" placeholder="输入JWT令牌...">
            </div>
        </div>
        
        <div class="tabs">
            <div class="tab active" onclick="switchTab('get-tab')">获取封面</div>
            <div class="tab" onclick="switchTab('upload-tab')">上传测试</div>
        </div>
        
        <div id="get-tab" class="tab-content active">
            <h2>获取图书封面</h2>
            <div class="form-group">
                <label for="bookIdInput">请输入图书ID</label>
                <input type="text" id="bookIdInput" placeholder="例如: 1, 2, 3...">
            </div>
            
            <button onclick="getBookCover()">获取图书封面</button>
            
            <div class="loading" id="getLoadingIndicator">加载中...</div>
            
            <div class="result" id="getResultContainer">
                <div class="status" id="getStatusMessage"></div>
                
                <div id="imagePath" class="image-path" style="display: none;"></div>
                
                <img id="bookCoverImage" class="book-cover" style="display: none;">
                <div id="getErrorContainer" class="error"></div>
            </div>
        </div>
        
        <div id="upload-tab" class="tab-content">
            <h2>上传图片测试</h2>
            <div class="form-group">
                <label for="testImageInput">选择测试图片</label>
                <input type="file" id="testImageInput" accept="image/*">
            </div>
            
            <div class="form-group">
                <label for="testBookId">测试书籍ID（用于文件名）</label>
                <input type="text" id="testBookId" placeholder="123">
            </div>
            
            <div class="buttons-container">
                <button onclick="uploadTestImage()">上传测试图片</button>
                <button class="secondary" onclick="testImageUrl()">测试图片URL</button>
            </div>
            
            <div class="loading" id="uploadLoadingIndicator">处理中...</div>
            
            <div class="result" id="uploadResultContainer">
                <div class="status" id="uploadStatusMessage"></div>
                <div id="uploadImagePath" class="image-path" style="display: none;"></div>
                <img id="uploadPreviewImage" class="book-cover" style="display: none;">
                <div id="uploadErrorContainer" class="error"></div>
            </div>
        </div>
    </div>

    <script>
        // 标签切换功能
        function switchTab(tabId) {
            // 移除所有标签和内容的active类
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // 为当前标签和内容添加active类
            document.querySelector(`#${tabId}`).classList.add('active');
            document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
        }
        
        // 获取图书封面功能
        async function getBookCover() {
            // 清空之前的结果
            document.getElementById('bookCoverImage').style.display = 'none';
            document.getElementById('imagePath').style.display = 'none';
            document.getElementById('getErrorContainer').textContent = '';
            document.getElementById('getStatusMessage').className = 'status';
            document.getElementById('getStatusMessage').textContent = '';
            
            // 显示加载指示器
            document.getElementById('getLoadingIndicator').style.display = 'block';
            
            const bookId = document.getElementById('bookIdInput').value.trim();
            if (!bookId) {
                document.getElementById('getErrorContainer').textContent = '请输入有效的图书ID';
                document.getElementById('getLoadingIndicator').style.display = 'none';
                return;
            }
            
            const token = document.getElementById('tokenInput').value.trim();
            const serverUrl = document.getElementById('serverUrlInput').value.trim() || 'http://localhost:8080';
            
            const headers = {
                'Content-Type': 'application/json'
            };
            
            if (token) {
                headers.Authorization = `Bearer ${token}`;
            }
            
            try {
                const response = await fetch(`${serverUrl}/api/user/book/cover/${bookId}`, {
                    method: 'GET',
                    headers: headers
                });
                
                const data = await response.json();
                
                // 隐藏加载指示器
                document.getElementById('getLoadingIndicator').style.display = 'none';
                
                if (data.code === 200) {
                    // 请求成功
                    document.getElementById('getStatusMessage').className = 'status success';
                    document.getElementById('getStatusMessage').textContent = data.message || '获取封面成功';
                    
                    // 显示图片路径和图片
                    if (data.data && data.data.cover) {
                        // 显示图片路径
                        const pathElement = document.getElementById('imagePath');
                        pathElement.textContent = `图片路径: ${data.data.cover} (${data.data.cover_type})`;
                        pathElement.style.display = 'block';
                        
                        // 构建图片URL并显示图片
                        const imageElement = document.getElementById('bookCoverImage');
                        imageElement.src = `${serverUrl}/${data.data.cover}`;
                        imageElement.alt = `Book Cover ID: ${bookId}`;
                        imageElement.style.display = 'block';
                        
                        // 添加图片加载错误处理
                        imageElement.onerror = function() {
                            document.getElementById('getErrorContainer').textContent = 
                                '无法加载图片。请检查服务器URL和图片路径是否正确，或者服务器是否正确配置了静态资源访问。';
                        };
                    } else {
                        document.getElementById('getErrorContainer').textContent = '服务器返回的数据格式不正确';
                    }
                } else {
                    // 请求失败
                    document.getElementById('getStatusMessage').className = 'status error';
                    document.getElementById('getStatusMessage').textContent = data.message || '获取封面失败';
                }
            } catch (error) {
                // 隐藏加载指示器
                document.getElementById('getLoadingIndicator').style.display = 'none';
                document.getElementById('getErrorContainer').textContent = `错误: ${error.message}`;
            }
        }
        
        // 上传测试图片功能
        async function uploadTestImage() {
            // 清空之前的结果
            document.getElementById('uploadPreviewImage').style.display = 'none';
            document.getElementById('uploadImagePath').style.display = 'none';
            document.getElementById('uploadErrorContainer').textContent = '';
            document.getElementById('uploadStatusMessage').className = 'status';
            document.getElementById('uploadStatusMessage').textContent = '';
            
            // 显示加载指示器
            document.getElementById('uploadLoadingIndicator').style.display = 'block';
            
            const fileInput = document.getElementById('testImageInput');
            if (!fileInput.files || !fileInput.files[0]) {
                document.getElementById('uploadErrorContainer').textContent = '请选择一张图片';
                document.getElementById('uploadLoadingIndicator').style.display = 'none';
                return;
            }
            
            const file = fileInput.files[0];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                // 获取Base64编码的图片数据
                const base64Data = e.target.result.split(',')[1]; // 移除前缀部分，只保留base64编码数据
                
                const bookId = document.getElementById('testBookId').value.trim() || 'test123';
                
                // 创建一个测试图片路径
                const timestamp = new Date().getTime();
                const fileName = `test_image_${bookId}_${timestamp}`;
                const extension = file.type.split('/')[1] || 'jpg';
                const imagePath = `images/${fileName}.${extension}`;
                
                // 显示预览
                document.getElementById('uploadPreviewImage').src = URL.createObjectURL(file);
                document.getElementById('uploadPreviewImage').style.display = 'block';
                
                document.getElementById('uploadImagePath').textContent = `图片路径: ${imagePath} (${file.type})`;
                document.getElementById('uploadImagePath').style.display = 'block';
                
                document.getElementById('uploadStatusMessage').className = 'status success';
                document.getElementById('uploadStatusMessage').textContent = '图片处理成功（仅预览，未上传到服务器）';
                
                // 隐藏加载指示器
                document.getElementById('uploadLoadingIndicator').style.display = 'none';
            };
            
            reader.onerror = function() {
                document.getElementById('uploadErrorContainer').textContent = '读取图片文件失败';
                document.getElementById('uploadLoadingIndicator').style.display = 'none';
            };
            
            reader.readAsDataURL(file);
        }
        
        // 测试图片URL功能
        function testImageUrl() {
            const serverUrl = document.getElementById('serverUrlInput').value.trim() || 'http://localhost:8080';
            const path = document.getElementById('uploadImagePath').textContent.split(':')[1];
            
            if (!path) {
                document.getElementById('uploadErrorContainer').textContent = '请先上传测试图片';
                return;
            }
            
            const imagePath = path.split(' ')[1];
            const newWindow = window.open(`${serverUrl}/${imagePath}`, '_blank');
            
            if (!newWindow) {
                document.getElementById('uploadErrorContainer').textContent = '请允许弹出窗口或手动复制链接测试';
            }
        }
    </script>
</body>
</html> 